<template>
	<div class="body">
		<div class="title">
			<div>购物车</div>
		</div>
		<div class="aaa"></div>
		<div class="edit">
			<div>编辑</div>
		</div>
		<section>
			<van-checkbox v-model="checked">
				<div class="item">
					<img src="../assets/logo.png" alt="">
					<div class="right">
						<p>fdbyugfhduhyfggfgbfjkdbgjfdbngjdfsbgjfdd</p>
						<div class="biaoqian">
							<div class="b-1">急速退款</div>
							<div class="b-2">正品保障</div>
						</div>
						<div class="jiage">
							<div class="text">
								<div class="text1">￥100</div>
								<div class="text2">￥155</div>
							</div>
							<div class="jiage-right">×1</div>
						</div>
					</div>
				</div>
			</van-checkbox>
			<van-divider></van-divider>
		</section>
		<section>
			<van-checkbox v-model="checked">
				<div class="item">
					<img src="../assets/logo.png" alt="">
					<div class="right">
						<p>fdbyugfhduhyfggfgbfjkdbgjfdbngjdfsbgjfdd</p>
						<div class="biaoqian">
							<div class="b-1">急速退款</div>
							<div class="b-2">正品保障</div>
						</div>
						<div class="jiage">
							<div class="text">
								<div class="text1">￥100</div>
								<div class="text2">￥155</div>
							</div>
							<div class="jiage-right">×1</div>
						</div>
					</div>
				</div>
			</van-checkbox>
			<van-divider></van-divider>
		</section>
		<section>
			<van-checkbox v-model="checked">
				<div class="item">
					<img src="../assets/logo.png" alt="">
					<div class="right">
						<p>fdbyugfhduhyfggfgbfjkdbgjfdbngjdfsbgjfdd</p>
						<div class="biaoqian">
							<div class="b-1">急速退款</div>
							<div class="b-2">正品保障</div>
						</div>
						<div class="jiage">
							<div class="text">
								<div class="text1">￥100</div>
								<div class="text2">￥155</div>
							</div>
							<div class="jiage-right">×1</div>
						</div>
					</div>
				</div>
			</van-checkbox>
			<van-divider></van-divider>
		</section>
		<section>
			<van-checkbox v-model="checked">
				<div class="item">
					<img src="../assets/logo.png" alt="">
					<div class="right">
						<p>fdbyugfhduhyfggfgbfjkdbgjfdbngjdfsbgjfdd</p>
						<div class="biaoqian">
							<div class="b-1">急速退款</div>
							<div class="b-2">正品保障</div>
						</div>
						<div class="jiage">
							<div class="text">
								<div class="text1">￥100</div>
								<div class="text2">￥155</div>
							</div>
							<div class="jiage-right">×1</div>
						</div>
					</div>
				</div>
			</van-checkbox>
			<van-divider></van-divider>
		</section>
		<div class="fukuan">
			<van-checkbox v-model="checked">全选</van-checkbox>
			<div class="right">
				<div>总计: <span>￥0.00</span></div>
				<van-button round color="#ee500c" size="small">去结算（3）</van-button>
			</div>
		</div>
	</div>
</template>
<style lang="less" scoped>
	@themeColor: #1ba4f0;
	@backColor: #f5f5f5;

	@shenglue: {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.body {
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			width: 100vw;
			height: 20vw;
			background-color: @themeColor;
			display: flex;
			justify-content: center;
			font-size: 20px;
			color: #fff;
			position: fixed;
			top: 0;
			div {
				margin-top: 5vw;
			}
		}
		.aaa{
			height: 20vw;
		}
		.edit {
			width: 100vw;
			height: 100px;
			background-color: @themeColor;

			div {
				text-align: right;
				padding: 20px;
				font-weight: 700;
				font-size: 20px;
			}
		}

		section {
			width: 95vw;
			border-radius: 15px;
			position: relative;
			top: -50px;
			background-color: #fff;
			padding: 5px;

			.item {
				display: flex;
				align-items: center;

				// justify-content: space-between;
				img {
					width: 70px;
					height: 80px;
					border-radius: 10px;

				}

				&>.right {
					width: 50vw;
					margin-left: 15px;

					// border: 1px solid #ccc;
					p {
						width: 100%;
						font-size: 22px;
						@shenglue()
					}

					.biaoqian {
						margin-top: 5px;
					}

					.jiage {
						width: 100%;

						.jiage-right {
							font-weight: 700;
							font-size: 25px;
						}
					}
				}
			}
		}

		&>.fukuan {
			width: 100vw;
			height: 55px;
			border-top-left-radius: 15px;
			border-top-right-radius: 15px;
			position: fixed;
			bottom: 50px;
			background-color: #fff;
			border: 1px solid #ccc;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 20px;

			&>.right {
				display: flex;
				align-items: center;
				div {
					margin-right: 5px;
					>span {
						font-weight: 700;
					}
				}
			}

		}
	}
</style>
<script>
	import {
		Checkbox,
		CheckboxGroup,
		Button,
		Divider
	} from 'vant'
	export default {
		data() {
			return {
				checked: true
			}
		},
		created() {
			this.$axios.get('http://116.63.80.218/cart/list',{
				params:{
					userId:1
				}
			})
			.then(res=>{
				console.log(res)
			})
			.catch(err=>{
				
			})
		},
		components: {
			[Button.name]: Button,
			[Checkbox.name]: Checkbox,
			[CheckboxGroup.name]: CheckboxGroup,
			[Divider.name]: Divider,
		},
		methods: {

		}
	}
</script>
